
<!--侧边栏-->
<style lang="less">
	.sider {
		width: auto;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
        user-select: none;
	}

	.sider1 {
		width: 100px;
		height: 97%;
		display: flex;
		overflow: hidden;
		background-color: white;
		border-radius: 0.5rem;
		transition: 1.5s;
		transform-origin: center;
		margin: 2px 10px 2px 10px;
		flex-direction: column;

	}

	.sider1:hover {
		width: 230px;
		transition-duration: 1.5s;

		.icon-con {
			opacity: 1;
			transition-duration: 1.5s;
		}
		.line {
			width: 190px;
			transition-duration: 1.5s;
		}
		.con{
		width: 100px;
		opacity: 1;
		transition-duration: 1.5s;
		}
	}

	.btn {
		display: flex;
		width: 60px;
		justify-content: space-around;
		margin-top: 25px;
		margin-left: 20px;

	}

	.btn-item {
		width: 10px;
		height: 10px;
		background-color: green;
		border-radius: 50%;
	}

	.btn-item:nth-child(2) {
		background-color: red;
	}

	.btn-item:nth-child(3) {
		background-color: yellow;
	}

	.icon {
		width: 190px;
		height: 60px;
		display: flex;
		margin-left: 20px;
		margin-top: 20px;

	}

	.icon-con {
		display: flex;
		flex-direction: column;
		opacity: 0;
		transition-duration: 1.5s;
	}

	.icon-img {
		height: 50px;
		width: 50px;
		background-color: beige;
		border-radius: 50%;
		border: 4px solid rgb(255, 255, 255, 0.3);
		overflow: hidden;
    cursor: pointer;
	}

	.icon-img img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
	}

	.icon-con {
		height: 60px;
		margin-left: 20px;
	}

	.line {
		width: 60px;
		height: 1px;
		background-color: rgb(218, 218, 218);
		margin: 20px 20px 0 20px;
		transition-duration: 1.5s;
	}

	.title {
		width: 60px;
		margin-left: 20px;
		text-align: center;

		p {
			font-size: 14px;
		}
	}

	.menu {
		width: 230px;
	}

	.item {
		border-radius: 5px;
		display: flex;
		position: relative;
		margin: 0 20px 0 20px;
		cursor: pointer;
		color: black;
		text-decoration:none
	}

	.licon {
		width: 60px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item:hover {
		background-color: #c7c8f2;
	}
	.con{
		height: 50px;
		display: flex;
		align-items: center;
		opacity: 0;
		transition-duration: 1.5s;
	}
	
	.ricon{
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

  .btn-right-table{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .form-image-hand{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }
  .username-img{
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 26px;
  }
  .username-img span{
    margin-left: 20px;
  }
  .input-telephon-qqmailbox{
    display: flex;
    width: 100%;
  }
</style>
<template>
	<div class="sider">
		<div class="sider1">
			<div class="btn">
				<div class="btn-item"></div><div class="btn-item"></div><div class="btn-item"></div>
			</div>
			<div class="icon" @click="data.openMyUser=true">
				<div class="icon-img"><img :src="data.user.headimage==null? avatarUrl:data.user.headimage " alt="" /></div>
				<div class="icon-con">
					<span>{{data.PermissionsSpan}}</span>
					<span style="font-weight: 400;">{{data.user.username || '测试管理员'}}</span>
				</div>
			</div>
			<div class="line"></div>
			<div class="title">
				<p>管理后台</p>
			</div>
			<div class="menu">
        <router-link
              v-for="(item,index) in navData"
              class="item" :to="{name:item.url}"
              @click="routerLinkFun(item)" >
						<div class="licon">
                <el-icon v-if="item.purview==0"><Menu /></el-icon>
                <el-icon v-if="item.purview==1"><CreditCard /></el-icon>
                <el-icon v-if="item.purview==2"><ShoppingCartFull /></el-icon>
                <el-icon v-if="item.purview==3"><Postcard /></el-icon>
                <el-icon v-if="item.purview==4"><User /></el-icon>
                <el-icon v-if="item.purview==5"><Wallet /></el-icon>
                <el-icon v-if="item.purview==6"><Notification /></el-icon>
					</div>
					<div class="con">{{item.name}}</div>
					<div class="ricon">
						
					</div>
						</router-link>
			</div>
		
		</div>
	</div>

  <el-drawer v-model="data.openMyUser" size="420px" :with-header="false" >
    <el-form
        ref="form"
        :model="data.user"
        :size="size"
        label-position="top"
        label-width="auto"
        style="user-select: none;"
    >
      <!--头像和账号-->
      <el-form-item  >
        <div class="username-img">
          <el-upload
              :action="uploadUrl"
              method="POST"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <el-image :src="data.user.headimage" class="form-image-hand" />
          </el-upload>
          <span>{{data.user.telephon}}</span>
          <el-icon  style="color: #3274d7;margin-left: 5px" v-if="data.user.sex=='男'"><Female /></el-icon>
          <el-icon style="color:palevioletred;margin-left: 5px" v-if="data.user.sex=='女'"><Male /></el-icon>
        </div>
      </el-form-item>
      <!--性别和是否展示开发人员-->
      <el-form-item >
        <el-radio-group v-model="data.user.sex">
          <el-radio label="男" >男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>

      </el-form-item>
      <!--昵称和邮箱-->
      <el-form-item >
        <div class="input-telephon-qqmailbox">
          <el-input placeholder="昵称" v-model="data.user.username"  />
          <el-input placeholder="QQ邮箱" v-model="data.user.qqmailbox"  />
        </div>
      </el-form-item>
      <!--修改密码-->
      <el-form-item label="修改密码">
        <el-input placeholder="修改密码" show-password :rows="1" type="password" v-model="data.user.password"  />
      </el-form-item>
      <!--现居住地址-->
      <el-form-item label="现居住地址" >
        <div class="input-telephon-qqmailbox">
          <el-input placeholder="现居住地址" :rows="1" type="textarea" v-model="data.user.address" style="width: 50%;" />
        </div>
      </el-form-item>
      <!--详细地址-->
      <el-form-item label="详细地址">
        <el-input placeholder="详细地址" :rows="1" type="textarea" v-model="data.user.detailedaddress"  />
      </el-form-item>
      <!--用户简介-->
      <el-form-item label="用户简介">
        <el-input placeholder="用户简介" :rows="1" type="textarea" v-model="data.user.lntroduction"  />
      </el-form-item>
      <!--备注-->
      <el-form-item label="备注">
        <el-input placeholder="备注" :rows="1" type="textarea" v-model="data.user.remarks"  />
      </el-form-item>
    </el-form>
    <div style="display: flex;justify-content: flex-end">
      <el-button @click="data.openMyUser = false">关闭</el-button>
      <el-button type="primary" @click="submitUser()">保存</el-button>
    </div>
  </el-drawer>
</template>
<script lang="ts" setup >
 import{navData} from'../data-source/Sider.js';
 import {onMounted, ref} from "vue";
 import {usePermissions} from "../store/authority";
 import {setUpdataUser,deleteimg,Avatar} from "../request/request";
 import {ElNotification} from "element-plus";
 import {uploadUrl,openid,avatarUrl} from "../request/URL";
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { navSiderStore } from "../store/navSider"
 import type { UploadProps } from 'element-plus'
 import { inject } from 'vue'


const data=ref({
  user:usePermissions().user,
  Permissions:usePermissions().userPermissions,
  PermissionsSpan:'Admin',
  openMyUser:false,//用户信息
  imageUrl:"",//接收头像地址
});//数据源

 /**
  * 修改账户信息
  */
 const submitUser=()=>{

   let VarData={
     openid:localStorage.getItem('openid') ,//openid
     address:data.value.user.address ,//地址
     detailedaddress:data.value.user.detailedaddress ,//详细地址
     username:data.value.user.username  ,//用户昵称
     sex :data.value.user.sex ,//用户性别
     password:data.value.user.password || null ,//用户密码
     headimage:data.value.user.headimage ,//头像
     qqmailbox:data.value.user.qqmailbox ,//QQ邮箱
     remarks:data.value.user.remarks ,//备注
     lntroduction:data.value.user.lntroduction ,//简介
   };//提交参数
   setUpdataUser(VarData).then((res)=>{
     if (res.code==200){
       usePermissions().updataUser();//更新用户信息
       ElNotification({title: 'Success', message: '修改成功', type: 'success'})
     }else {
       ElNotification({title: 'Error', message: '修改失败', type: 'error'})
     }
   })
}

 /**
  * 调用home.vue重载方法
  */
 const reload:any = inject('reload')
 const reload2:any = inject('reload2')
 /**
  * 路由事件的状态行为
  */
 const routerLinkFun=(e)=>{
     console.log(e.url)
     if (e.url=='home'){
         navSiderStore().setHomeStatus(true);
     }else {
         navSiderStore().setHomeStatus(false);
     }
     navSiderStore().setSearchStatus(e.searchStatus);//搜索框
     navSiderStore().setFileAddStatus(e.fileAddStatus);//文件管理
     navSiderStore().setOfficialWebsite(e.officialWebsite);//综合站点
     navSiderStore().setDataTimeStatus(e.dataTimeStatus);//日期范围
     reload();//调用刷新方法
     reload2();
 }
 /**
  * 头像上传成功
  */
 const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
   deleteimg({fileName:data.value.user.headimage});
   Avatar({openid:openid,headimage:response.data}).then((res)=>{
     if (res.code==200){
       data.value.user.headimage=response.data
       usePermissions().setUser(data.value.user)
       ElNotification({title: 'Success', message: '头像上传成功', type: 'success'})
     }else {
       ElNotification({title: 'Error', message: '上传失败', type: 'error'})
     }

   })
 }
 /**
  * 头像上传之前（校验）
  */
 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
   if (rawFile.type !== 'image/jpeg') {
     ElMessage.error('上传的头像必须是图片格式!')
     return false
   } else if (rawFile.size / 1024 / 1024 > 2) {
     ElMessage.error('Avatar picture size can not exceed 2MB!')
     return false
   }
   return true
 }

 /**
  * 加载
  */
 onMounted(()=>{
   usePermissions().updataUser();//更新用户信息
   if (data.value.Permissions.includes('SuperAdmin')){data.value.PermissionsSpan='SuperAdmin'}
 })

</script>
